<template>
	<view class="u-page">
		<view class="card">
			<view class="bg">
				<u-icon name="checkbox-mark" size="48" color="#fff"></u-icon>
			</view>
			<view class="text-center m-t-10">
				<view class="success-text">
					支付成功
				</view>
				<view class="m-t-10">
					<span class="price">+100</span> <span style="font-size: 28rpx;margin-left: 5rpx;" class="">积分</span>
				</view>
			</view>
			<view class="m-t-30 submit">
				<u-button @click="back()" text="返回首页" :plain="true" shape="circle"
					:customStyle="{margin:'30rpx 30rpx',background:'transparent'}" :color="$u.color.color">
				</u-button>
				<u-button @click="view()" text="查看订单" shape="circle" :customStyle="{margin:'30rpx 30rpx'}"
					:color="$u.color.color">
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			back() {
				uni.redirectTo({
					url: '/pages/home/home'
				})
			},
			view() {
				uni.redirectTo({
					url: '/pages/order/list'
				})
			}
		}
	}
</script>

<style lang="scss">
	.success-text {
		font-weight: 700;
	}

	.price {
		color: $priceColor;
	}

	.card {
		border-radius: $radius;
		box-shadow: $shadow;
		background: linear-gradient(180deg, rgba(227, 227, 252, 1) 0%, rgba(255, 255, 255, 1) 100%);
		height: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bg {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: $color;
		border-radius: 50%;
		padding: 10rpx;
	}

	.text-center {
		text-align: center;
	}

	.submit {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
	}
</style>
